<template>
  <div class="shuttle-table-page">

    <sky-card-panel title="穿梭单数据" subTitle='通用'>

      <div slot="main" class="containter-form">

        <sky-shuttle model="Single" :leftSingleConfig="leftSingleConfig" :rightSingleConfig="rightSingleConfig"></sky-shuttle>

      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
             // 穿梭框 

            &lt;sky-shuttle model="Single" :leftSingleConfig="leftSingleConfig" :rightSingleConfig="rightSingleConfig"&gt;&lt;/sky-shuttle&gt;

                  
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
             // 穿梭框
             
            export default {
              data () {
                return {
                  leftSingleConfig: {
                    listData: [
                      {
                        id: '1',
                        name: '人防工程监理(1)',
                        // check: true
                      },
                      {
                        id: '2',
                        name: '人防工程监理(2)',
                      },
                      {
                        id: '3',
                        name: '人防工程监理(3)',
                      },
                      {
                        id: '4',
                        name: '人防工程监理(4)',
                      }
                    ]
                  },
                  rightSingleConfig: {
                    listData: []
                  },
                }
              }
            }
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <sky-card-panel title="穿梭单数据" subTitle='带搜索'>

      <div slot="main" class="containter-form">

        <sky-shuttle model="Single" :leftSingleConfig="leftSearchSingleConfig" :rightSingleConfig="rightSearchSingleConfig" :isSearch="true"></sky-shuttle>

      </div>
    </sky-card-panel>
        <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
             // 穿梭框 

            &lt;sky-shuttle model="Single" :leftSingleConfig="leftSingleConfig" :rightSingleConfig="rightSingleConfig"  :isSearch="true"&gt;&lt;/sky-shuttle&gt;

                  
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
             // 穿梭框
             
            export default {
              data () {
                return {
                  leftSearchSingleConfig:{
                  listData: [
                      {
                      id: '1',
                      name: '人防工程(1)',
                      // check: true
                    },
                      {
                      id: '2',
                      name: '人防工程(2)',
                      // check: true
                    },
                      {
                      id: '3',
                      name: '人防工程(3)',
                      // check: true
                    },
                      {
                      id: '4',
                      name: '人防工程(4)',
                      // check: true
                    },
                      {
                      id: '5',
                      name: '人防工程(5)',
                      // check: true
                    },
                      {
                      id: '6',
                      name: '人防工程(6)',
                      // check: true
                    },
                      {
                      id: '7',
                      name: '人防工程(7)',
                      // check: true
                    },
                  ]
                },
                  rightSearchSingleConfig:{
                    listData: []
                  },
                }
              }
            }
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <sky-card-panel title="穿梭表格" subTitle='标题描述'>

      <div slot="main" class="containter-form">

        <sky-shuttle model="Table" :leftTableConfig="leftTableConfig" :rightTableConfig="rightTableConfig"></sky-shuttle>

      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
             // 穿梭框 

            &lt;sky-shuttle 
            :leftTableConfig="leftTableConfig" 
            :rightTableConfig="rightTableConfig"
            &gt;&lt;/sky-shuttle&gt;



                  
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
             // 穿梭框
             
            export default {
              data () {
                return {
                  leftTableConfig: {
                    thHead: [
                      {
                        name: "工程",
                      },
                      {
                        name: "单据类型",
                      },
                      {
                        name: "已分摊金额",
                      },
                      {
                        name: "未分摊金额",
                      }

                    ],
                    tbData: [
                      {
                        id: '1',
                        name: '人防工程监理(1)',
                        type: '单据类型',
                        havemoney: 1,
                        waitmoney: '200,000.00',
                        // check: true
                      },
                      {
                        id: '2',
                        name: '人防工程监理(2)',
                        type: '单据类型',
                        havemoney: 2,
                        waitmoney: '200,000.00',
                      },
                      {
                        id: '3',
                        name: '人防工程监理(3)',
                        type: '单据类型',
                        havemoney: 3,
                        disabled: true,
                        waitmoney: '200,000.00',
                      },
                      {
                        id: '4',
                        name: '人防工程监理(4)',
                        type: '单据类型',
                        havemoney: 4,
                        waitmoney: '200,000.00',
                      }
                    ]
                  },
                  rightTableConfig: {
                    thHead: [
                      {
                        name: "工程",
                      },
                      {
                        name: "单据类型",
                      },
                      {
                        name: "已分摊金额",
                      },
                      {
                        name: "未分摊金额",
                      }

                    ],
                    tbData: []
                  },
                }
              }
            }
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        leftSingleConfig: {
          listData: [
            {
              id: '1',
              name: '人防工程监理(1)',
              // check: true
            },
            {
              id: '2',
              name: '人防工程监理(2)',
            },
            {
              id: '3',
              name: '人防工程监理(3)',
            },
            {
              id: '4',
              name: '人防工程监理(4)',
            }
          ]
        },

        rightSingleConfig: {
          listData: []
        },
        leftSearchSingleConfig:{
          listData: [
              {
              id: '1',
              name: '人防工程(1)',
              // check: true
            },
              {
              id: '2',
              name: '人防工程(2)',
              // check: true
            },
              {
              id: '3',
              name: '人防工程(3)',
              // check: true
            },
              {
              id: '4',
              name: '人防工程(4)',
              // check: true
            },
              {
              id: '5',
              name: '人防工程(5)',
              // check: true
            },
              {
              id: '6',
              name: '人防工程(6)',
              // check: true
            },
              {
              id: '7',
              name: '人防工程(7)',
              // check: true
            },
          ]
        },
        rightSearchSingleConfig:{
          listData: []
        },
        leftTableConfig: {
          thHead: [
            {
              name: "工程",
            },
            {
              name: "单据类型",
            },
            {
              name: "已分摊金额",
            },
            {
              name: "未分摊金额",
            }

          ],
          tbData: [
            {
              id: '1',
              name: '人防工程监理(1)',
              type: '单据类型',
              havemoney: 1,
              waitmoney: '200,000.00',
              // check: true
            },
            {
              id: '2',
              name: '人防工程监理(2)',
              type: '单据类型',
              havemoney: 2,
              waitmoney: '200,000.00',
            },
            {
              id: '3',
              name: '人防工程监理(3)',
              type: '单据类型',
              havemoney: 3,
              disabled: true,
              waitmoney: '200,000.00',
            },
            {
              id: '4',
              name: '人防工程监理(4)',
              type: '单据类型',
              havemoney: 4,
              waitmoney: '200,000.00',
            }
          ]
        },
        rightTableConfig: {
          thHead: [
            {
              name: "工程",
            },
            {
              name: "单据类型",
            },
            {
              name: "已分摊金额",
            },
            {
              name: "未分摊金额",
            }

          ],
          tbData: []
        },

      }
    }
  }
</script>

<style scoped lang="scss">
.shuttle-table-page {
  & .containter-form {
    padding-bottom: 20px;
  }
}
</style>